<template>
    <view
        class="pages"
        :class="themeName"
        :style="
            'background-image: url(' +
            $getImageUri('resource/image/shopapi/default/login_bg.png') +
            ')'
        "
    >
        <view class="forget-pwd">
            <u-navbar :is-back="true" :background="{ background: `rgba(256,256,256,0)` }">
            </u-navbar>
            <view
                class="font-size-38"
                style="font-weight: 500; margin-top: 80rpx; margin-bottom: 60rpx"
                >忘记登录密码</view
            >
            <view class="input-container">
                <view class="input">
                    <u-field
                        :border-bottom="false"
                        label-width="160"
                        label="手机号"
                        v-model="ferget.mobile"
                        placeholder="请输入手机号"
                        :input-border="false"
                    />
                </view>
                <view class="input">
                    <u-field
                        :border-bottom="false"
                        label-width="160"
                        label="短信验证码"
                        v-model="ferget.code"
                        placeholder="请输入验证码"
                        :input-border="false"
                    >
                        <view slot="right">
                            <view class="sms-btn" @tap="sendSMS">
                                <!-- 获取验证码 -->
                                <u-verification-code
                                    unique-key="login"
                                    ref="uCode"
                                    @change="codeChange"
                                >
                                </u-verification-code>
                                <view class="garyTipsText p-l-20">{{ codeTips }}</view>
                            </view>
                        </view>
                    </u-field>
                </view>
                <view class="input">
                    <u-field
                        :border-bottom="false"
                        label-width="160"
                        label="设置密码"
                        type="password"
                        v-model="ferget.password"
                        placeholder="请输入密码"
                        :input-border="false"
                    />
                </view>
                <view class="input">
                    <u-field
                        :border-bottom="false"
                        label-width="160"
                        label="确认密码"
                        type="password"
                        v-model="ferget.password_confirm"
                        placeholder="请确认密码"
                        :input-border="false"
                    />
                </view>
            </view>
            <button class="btn white" size="lg" @tap="fergetFun">立即重置密码</button>
        </view>
    </view>
</template>

<script>
import { apiResetPasswordCaptcha, apiResetPassword } from '@/api/app'
import { mapGetters } from 'vuex'

export default {
    data() {
        return {
            ferget: {
                mobile: '',
                code: '',
                password: '',
                password_confirm: ''
            },
            codeTips: ''
        }
    },
    methods: {
        codeChange(tip) {
            this.codeTips = tip
        },
        fergetFun() {
            let { mobile, password, code, password_confirm } = this.ferget
            if (!mobile) {
                this.$toast({
                    title: '请输入手机号'
                })
                return
            }
            if (!code) {
                this.$toast({
                    title: '请输入验证码'
                })
                return
            }
            if (!password) {
                this.$toast({
                    title: '请输入密码'
                })
                return
            }
            if (!password) {
                this.$toast({
                    title: '请再次输入密码'
                })
                return
            }
            if (password != password_confirm) {
                this.$toast({
                    title: '两次密码输入不一致'
                })
                return
            }
            apiResetPassword({
                mobile,
                password,
                code
            }).then((res) => {
                setTimeout(() => {
                    this.$Router.back(1)
                }, 1500)
            })
        },
        sendSMS() {
            if (!this.$refs.uCode.canGetCode) return
            if (!this.ferget.mobile) {
                this.$toast({
                    title: '请输入手机号'
                })
                return
            }
            apiResetPasswordCaptcha({
                mobile: this.ferget.mobile
            }).then((res) => {
                this.$refs.uCode.start()
            })
        }
    },
    computed: {
        ...mapGetters(['appConfig'])
    }
}
</script>

<style lang="scss">
.forget-pwd {
    padding: 0rpx 60rpx;

    .input {
        height: 100rpx;
        display: flex;
        align-items: center;
        border: 1px solid #d7d7d7;
        border-radius: 12rpx;
        margin-bottom: 40rpx;
    }

    .sms-btn {
        border-left: $-solid-border;

        // text-align: center;
        // border: 1px solid;
        // width: 176rpx;
        // height: 60rpx;
        // line-height: 60rpx;
        // border-radius: 60rpx;
        // @include font_color();
        // @include border_color();
        .garyTipsText {
            color: #888888;
        }
    }

    .btn {
        height: 100rpx;
        line-height: 100rpx;
        margin-top: 60rpx;
        @include background_color();
    }
}
</style>
